<template>
    <view>
        <u-cell-group title="tabBar">
            <u-cell-item
                v-for="item in tabBar"
                :key="item.path"
                :icon="'setting-fill'"
                :title="item.title || item.path"
                @click="navigateToPage(item.path)"
            ></u-cell-item>
        </u-cell-group>
        <u-cell-group title="pages">
            <u-cell-item
                v-for="item in pages"
                :key="item.path"
                :icon="'setting-fill'"
                :title="item.title || item.path"
                @click="navigateToPage(item.path)"
            ></u-cell-item>
        </u-cell-group>
        <u-cell-group title="subPackages">
            <u-cell-item
                v-for="item in subPages"
                :key="item.path"
                :icon="'setting-fill'"
                :title="item.title || item.path"
                @click="navigateToPage(item.path)"
            ></u-cell-item>
        </u-cell-group>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const navigateToPage = (path, isTab = false) => {
    uni.vk.navigateTo({ url: `/${path}` })
}
const pages = ref([])
const subPages = ref([])
const tabBar = ref([])
onMounted(async () => {
    const pageData = await import('../../pages.json')
    tabBar.value = pageData.tabBar.list.map((item) => ({ title: item.text, path: item.pagePath }))
    pages.value = pageData.pages
        .filter((item) => !tabBar.value.find((item1) => item.path === item1.path))
        .map((item) => ({ path: item.path, title: item.style.navigationBarTitleText }))
    pageData.subPackages.forEach((item) => {
        item.pages.forEach((item1) => {
            subPages.value.push({ path: `${item.root}/${item1.path}`, title: item1.style.navigationBarTitleText })
        })
    })
})
</script>

<style></style>
